<template>
  <!-- 个人作品编辑//作品 -->
  <div>
    <van-nav-bar>
      <template #left>
        <van-icon
          name="arrow-left"
          color="#FF8800"
          size="20"
          @click="onClickLeft()"
        />
      </template>
      <template #title>
        <h3>上传作品</h3>
      </template>
    </van-nav-bar>
    <div class="backg">
      <div class="box1">
        <!-- 添加作品 -->
        <!-- 添加作品介绍 -->
        <van-field
          @blur.native.capture="checkText"
          :state="text"
          v-model="textValue"
          placeholder="请输入作品描述内容"
          type="textarea"
          rows="7"
        ></van-field>
      </div>
      <div class="box2">
        <!-- 添加作品图片 -->
        <van-uploader
          accept="image/jpg,image/jpeg,image/png,image/gif"
          :before-read="beforeRead"
          :after-read="afterRead"
          v-model="fileList"
          name="uploadFile"
          multiple
          :max-count="4"
        />
      </div>
      <div class="box3">
        <h4>选择话题</h4>
        <div>
          <span
            @click="now = i"
            :class="{ active: now === i }"
            v-for="(item, i) in tag"
            :key="i"
          >
            #{{ item }}#</span
          >
        </div>
      </div>
      <van-button
        :class="{ hightlight: isTrim }"
        class="disabled"
        :disabled="!isTrim"
        @click="upload"
        block
        >上传</van-button
      >
    </div>
  </div>
</template>

<script>
import { Notify } from "vant";
import { mapState } from "vuex";
export default {
  data() {
    return {
      fileList: [],
      imgSrc: [],
      tag: [
        "备战中秋",
        "夏季必做",
        "下午茶",
        "早餐",
        "午餐",
        "晚餐",
        "夜宵",
        "颜值控",
        "翻车记",
      ],
      now: 0,
      text: "",
      textValue: "",
    };
  },
  computed: {
    ...mapState(["userInfo"]),
    isTrim() {
      if (this.checkText() || this.fileList.length != 0) {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    beforeRead(file) {
      if (
        file.type == "image/jpeg" ||
        file.type == "image/jpg" ||
        file.type == "image/png" ||
        file.type == "image/gif"
      ) {
        return true;
      } else {
        this.$toast("请上传jpeg/jpg/png/gif格式的图片");
        return false;
      }
    },
    afterRead(file) {
      const param = new FormData();
      param.append("uploadFile", file.file);
      this.axios({
        url: "upload",
        method: "post",
        data: param,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then((res) => {
        // console.log(res.data);
        this.imgSrc.push(...res.data.urls);
        // console.log(this.imgSrc);
      });
    },
    onClickLeft() {
      return this.$router.go(-1);
    },
    checkText() {
      let exp = /^.{3,20}$/;
      if (exp.test(this.textValue) && this.textValue.trim() != "") {
        this.text = "success";
        return true;
      } else {
        this.text = "error";
        return false;
      }
    },
    upload() {
      if (this.checkText()) {
        let url = `publish?content=${this.textValue}&imgsrc=${
          this.imgSrc
        }&topic=${this.tag[this.now]}&author_id=${this.userInfo.uid}`;
        this.axios.get(url).then((res) => {
          // console.log(res);
          //发布成功提示
          if (res.data.code == 200) {
            Notify({ type: "success", message: "发布成功", duration: 1000 });
            // 跳转到之前的页面
            return this.$router.go(-1);
          } else {
            Notify({
              type: "danger",
              message: "登录后才能发布作品",
              duration: 1000,
            });
            this.textValue = "";
            this.fileList.length = 0;
            this.imgSrc.splice(0, this.imgSrc.length);
          }
        });
      }
    },
  },
};
</script>

<style scoped>
.disabled {
  background-color: #e7e7e7;
  color: #919191;
}
.hightlight {
  background-color: #ff7f24;
  color: #fff;
}
</style>

<style lang="scss" scoped>
.backg {
  background-color: #fff;
  height: calc(100vh - 46px);
}
.box1 {
  background-color: #fff;
}
.box2 {
  background-color: #fff;
  position: relative;
  height: 100px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border-bottom: 1px solid rgb(114, 108, 108, 0.6);
}

.box3 {
  background-color: #fff;
  padding: 10px;
  height: 250px;
  h4 {
    margin: 10px 0 15px;
  }
  div:last-child {
    display: flex;
    flex-flow: row wrap;
    span {
      display: block;
      margin: 5px;
      padding: 5px 10px;
      border: 1px solid rgb(114, 108, 108, 0.6);
      border-radius: 5px;
      &.active {
        border: 1px solid #ff7f24;
        color: #ff7f24;
      }
    }
  }
}
</style>
